﻿@page "/blocks"

<h3>Block 条件块</h3>

<h4>根据参数条件决定是否显示块内容，通常与权限授权配合使用</h4>

<DemoBlock Title="普通用法" Introduction="通过设置 <code>OnQueryCondition</code> 回调方法返回值判断是否显示组件内容" Name="Normal">
    <div class="mb-3" style="height: 21px;">
        <Block OnQueryCondition="OnQueryCondition" Name="Normal">
            <div>我是组件内容</div>
        </Block>
    </div>
    <Button Icon="@GetIcon()" Text="@GetText()" OnClick="ToggleCondition" />
</DemoBlock>

<DemoBlock Title="模板" Introduction="通过设置 <code>Authorized</code> <code>NotAuthorized</code> 可以分别设置符合条件与不符合条件时显示的内容" Name="Template">
    <div class="mb-3" style="height: 21px;">
        <Block OnQueryCondition="OnQueryCondition2" Name="Template">
            <Authorized>
                <div>我是 <b>符合</b> 条件显示的组件内容</div>
            </Authorized>
            <NotAuthorized>
                <div>我是 <b>不符合</b> 条件显示的组件内容</div>
            </NotAuthorized>
        </Block>
    </div>
    <Button Icon="@GetIcon2()" Text="@GetText2()" OnClick="ToggleCondition2" />
</DemoBlock>

<DemoBlock Title="通过权限判断" Introduction="本例模拟用户登录来控制 <code>Block</code> 内容是否显示，使用比 <code>AuthorizeView</code> 简单" Name="Authorizate">
    <div class="mb-3" style="height: 21px;">
        <Block OnQueryCondition="OnQueryUser" Name="Authorized">
            <div>我是 <code>CondtionBlock</code> 组件内容，当前登录用户：<code>@UserName</code></div>
        </Block>
    </div>
    <Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState>
        <Microsoft.AspNetCore.Components.Authorization.AuthorizeView>
            <Authorized>
                <div>我是 <code>AuthorizeView</code> 组件内容，当前登录用户：<code>@context.User.Identity?.Name</code></div>
            </Authorized>
            <NotAuthorized>
                <div>我是 <code>AuthorizeView</code> 组件内容，当前未登录</div>
            </NotAuthorized>
        </Microsoft.AspNetCore.Components.Authorization.AuthorizeView>
    </Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState>
    <Button Icon="@GetUser()" Text="@GetUserText()" OnClick="ToggleAuthor" class="mt-3" />
</DemoBlock>

<DemoBlock Title="预设置用户" Introduction="通过设置 <code>Users</code> 控制显示内容，当前登录用户属于预设用户时显示" Name="Users">
    <div style="height: 21px;">
        <Block Users="@Users">
            <div>当前用户 <code>@UserName</code> 允许看到此内容</div>
        </Block>
    </div>
    <Button Icon="@GetUser()" Text="@GetUserText()" OnClick="ToggleAuthor" class="mt-3" />
</DemoBlock>

<DemoBlock Title="预设置角色" Introduction="通过设置 <code>Roles</code> 控制显示内容，当前登录用户属于预设角色时显示" Name="Roles">
    <div style="height: 21px;">
        <Block Roles="@Roles">
            <div>当前角色 <code>User</code> 允许看到此内容</div>
        </Block>
    </div>
    <Button Icon="@GetUser()" Text="@GetUserText()" OnClick="ToggleAuthor" class="mt-3" />
</DemoBlock>

<Tips class="mt-3">
    <p>通过设置不同的 <code>Name</code> 当作资源，结合授权系统对此资源授权可以实现对网页中任意元素进行权限控制</p>
</Tips>

<AttributeTable Items="@Blocks.GetAttributes()" />
